<!--
break-task
重点任务
-->
<template>
    <div class="task-list">
        <!-- 表格头部 -->
        <div class="task-list-head">
            <ul class="list-group">
                <li
                v-for="item in taskListHead"
                :key="item.id">
                {{ item.title }}</li>
            </ul>
        </div>
        <!-- 表格内容 -->
        <div class="task-list-con">
            <ul
            v-for="(item, index) in taskListCon"
            :key="index"
            class="list-group list-con">
                <li>{{ index > 8 ? (index+1) : `0${index+1}` }}</li>
                <li
                @click="handleClickTask(item)"
                :title="item.name">{{ item.name }}</li>
                <li>
                    <el-progress
                    :percentage="getPercent(item.progress)"
                    :stroke-width="12"
                    >
                    </el-progress>
                </li>
            </ul>
        </div>

        <!-- 重点任务详情
        序号
        车号
        端号
        所属动车所
        完成时间
        完成人员
        备注-->
        <el-dialog
        width="80%"
        title="任务进度详情"
        :visible.sync="taskVisible">
            <div class="ext-title">{{ extInfo }}</div>
            <el-table
            :data="taskInfoData"
            border
            :height="tbHeight"
            style="width: 100%;margin-top: .5rem">

                <el-table-column
                prop="czh"
                label="车号">
                </el-table-column>

                <el-table-column
                prop="cduan"
                label="端号">
                </el-table-column>

                <el-table-column
                prop="operatedcs"
                label="所属动车所">
                </el-table-column>

                <el-table-column
                prop="operatetime"
                label="完成时间">
                </el-table-column>

                <el-table-column
                prop="operator"
                label="完成人员">
                </el-table-column>

                <el-table-column
                prop="remark"
                label="备注">
                </el-table-column>

            </el-table>
            <div class="pagination">
                <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="totalNum">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    getBreakTaskList, // 获取重点任务列表接口
    getBreakTaskInfoData, // 获取重点任务详情
} from '@/apis';
// 引入数学运算避免精度丢失问题
import $Math from '@/utils/math';

export default {
    name: 'break-task',
    components: {},
    computed: {
        tbHeight() {
            return 'calc(100% - 3rem)';
        },
    },
    data() {
        return {
            taskInfoData: [],
            extInfo: null,
            listId: null,
            // 页码
            currentPage: 1,
            // 每页显示数量
            pageSize: 10,
            // 列表总数量
            totalNum: 0,
            taskVisible: false,
            // 表格头部
            taskListHead: [{
                id: 0,
                title: '序号',
            }, {
                id: 1,
                title: '任务名称',
            }, {
                id: 2,
                title: '进度',
            }],
            // 表格数据
            taskListCon: [],
        };
    },
    methods: {
        // 获取重点任务列表
        getTaskTable() {
            getBreakTaskList().then((res) => {
                const {
                    data,
                    code,
                } = res.data;
                if (code === 200) {
                    this.taskListCon = data;
                }
            }).catch((err) => {
                window.console.log('获取重点任务列表', err);
            });
        },

        // 百分比
        getPercent(progress) {
            return $Math.multiply(progress, 100);
        },

        // 点击任务 弹出重点任务详情
        handleClickTask(item) {
            this.listId = item.id;
            this.getBreakTaskInfo();
        },

        // 请求任务详情
        getBreakTaskInfo() {
            const params = {
                pageNo: this.currentPage,
                pageSize: this.pageSize,
                id: this.listId,
            };
            getBreakTaskInfoData(params).then((res) => {
                const {
                    extInfo,
                    rows,
                    code,
                    total,
                } = res.data;
                if (code === 200 || code === 0) {
                    window.console.log('请求重点任务详情', rows);
                    this.taskInfoData = rows;
                    this.extInfo = extInfo;
                    this.totalNum = total;
                    this.taskVisible = true;
                }
            }).catch((err) => {
                window.console.log('请求重点任务详情', err);
            });
        },

        // 选择每页显示多少条
        handleSizeChange(val) {
            this.pageSize = val;
            this.getBreakTaskInfo();
        },

        // 选择页码改变
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getBreakTaskInfo();
        },
    },
    created() {
        this.getTaskTable();
    },
};
</script>
<style lang='scss'>
.task-list {
    /* width: 68.85%; */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: .33rem;
    float: left;

    &-head {
        width: 100%;
        height: .778rem; // 28
        background: #16327a;

    }

    &-con {
        width: 100%;
        height: calc(100% - .778rem);
        overflow: auto;
    }

    ul.list-group {
        width: 100%;
        height: 100%;
        overflow: hidden;

        li {
            float: left;
            height: .778rem;
            line-height: .778rem;
            color: #4795ff;
            font-size: .3889rem /* 14/80 */;

            &:first-child {
                width: 19%;
                text-align: center;
                @include ellipsisBasic(1);
            }

            &:nth-child(2){
                width: 46%;
                @include ellipsisBasic(1);
            }

            &:nth-child(3){
                width: 35%;
                //@include ellipsisBasic(1);
            }
        }
    }

    ul.list-con {
        height: .778rem;
        li {
            color: #fff;
            box-sizing: border-box;
            font-size: .3889rem /* 14/80 */;
            border-bottom: 1px solid #153777;

            &:nth-child(3) {
                padding-top: calc(.1rem + 6px);
            }
            .el-progress {
                .el-progress-bar {
                    padding-right: 1.389rem /* 50/80 */;
                    margin-right: -1.528rem; // 55
                }
                .el-progress-bar__outer {
                    border-radius: 0 12.5rem 12.5rem 0;
                    background: #055a98;
                    height: .33rem!important;

                    .el-progress-bar__inner {
                        border-radius: 0 12.5rem 12.5rem 0;
                        background-image: linear-gradient(to right, #03b4da, #26d0d4, #51f2cd);
                    }
                }
                .el-progress__text {
                    color: #fff;
                    font-size: .33rem!important;
                }
            }

        }
    }

    @import '../../common/styles/dialog.scss';
    @import '../../common/styles/rtb.scss';

    .ext-title {
        width: 100%;
        height: 1rem;
        box-sizing: border-box;
        border-left: .11rem solid #72C0FF;
        padding-left: .5rem;
        color: #333;
        background: #f0f0f0;
        font-size: .389rem;
        line-height: 1rem;;
    }

    .pagination {
        width: 100%;
        height: 1.5rem;
        padding-top: .5rem;
        box-sizing: border-box;
        //border-top: .0278rem solid #409EFF;

        @import '../../common/styles/rpage.scss';
    }
}
</style>
